<template>
  <div>成绩等级显示：</div>
  <p v-if="type =='A'">优秀</p>
  <P v-else-if="type =='B'">良好</P>
  <p v-else-if="type =='C'">中等</p>
  <p v-else-if="type =='D'">及格</p>
  <p v-else>不及格</p>
  <button @click="tran">切换成优秀</button>
  <!-- 四个按钮 -->
<button @click="type=='B'">切换成良好</button>
<button @click="type=='C'">切换成中等</button>
<button @click="type=='D'">切换成及格</button>
<button @click="type==''">切换成不及格</button> 
</template>

<script setup>
import { ref } from 'vue';
const tran=()=>{
  type.value ="A"
}
let type = ref('B');

</script>

<style>
</style>